<template>
  <div>
    <IndependenceForm ref="form" :submit-fun="submitFun">
      <page-region title="货物信息">
        <el-button type="primary" style="margin-bottom: 10px; margin-left: 10px" @click="showSelectProduct">
          选择货物
        </el-button>
        <SingleForm v-if="specSelectVisible" ref="specInfoForm" v-bind="specInfo" />
      </page-region>
      <page-region title="基本信息">
        <SingleForm ref="baseForm" v-bind="baseFormInfo" />
      </page-region>
      <template #specSelect="{ cellRenderFrame, cellRenderData }">
        <SpecSelect
          v-if="specSelectVisible"
          ref="specSelect"
          v-model="cellRenderData[cellRenderFrame.key]"
          :productId
        />
      </template>
    </IndependenceForm>
    <ProductSelect ref="productSelect" @save-success="selectProductHandle" />
  </div>
</template>
<script setup lang="ts">
import {
  MIndependenceForm as IndependenceForm,
  MPageRegion as PageRegion,
  MSingleForm as SingleForm,
  type SingleFormProps
} from "page-com";
import { shallowReactive, useTemplateRef, ref, provide, getCurrentInstance } from "vue";
import { successMsg } from "@/utils/message";
import ProductSelect from "./ProductSelect.vue";
import SpecSelect from "./SpecSelect.vue";
import { addProductSpecInboundOrder } from "@/api/warehouse/productspecinboundorderApi";
import { getWarehouseSelect } from "@/api/warehouse/warehouseApi";
const form = useTemplateRef("form");
async function submitFun(data) {
  let res = await addProductSpecInboundOrder(data);
  if (res.code == RESPONSE_CODE.SUCCESS) {
    successMsg("添加成功");
    form.value.goBack();
  }
}
const productId = ref<number>();
const baseFormInfo = shallowReactive<Partial<SingleFormProps>>({
  items: [
    {
      frameType: "select",
      key: "warehouseId",
      label: "仓库",
      options: getWarehouseSelect().then(v => v.data),
      validations: {
        required: true
      }
    }
  ]
});
const specInfo = shallowReactive<Partial<SingleFormProps>>({
  items: [
    {
      frameType: "slot",
      slot: "specSelect",
      key: "specInfos",
      label: "",
      value: [],
      validations: {
        required: true
      }
    }
  ]
});
const productSelect = useTemplateRef("productSelect");
function showSelectProduct() {
  productSelect.value.show();
}
const specSelectVisible = ref(false);
function selectProductHandle(data: ShopProductVo) {
  productId.value = data.id;
  specSelectVisible.value = true;
}
</script>
